<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/taglib/taglib.jsp" %>

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BootStrap FileInput plugin Demo</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
<link href="${ctxStatic }/css/fileinput/css/fileinput.css"  rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<script src="${ctxStatic }/js/jquery-3.2.1.js" type="text/javascript" crossorigin="anonymous"></script>
<script src="${ctxStatic }/js/fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="${ctxStatic }/js/fileinput/js/locales/zh.js" type="text/javascript"></script>
</head>
<body>
<h2>BootStrap FileInput 文件上传</h2>
	<form enctype="multipart/form-data">
        <label>Chinese Input</label>
        <div class="file-loading">
            <input id="uploadFile" name="uploadFile" type="file" multiple >
<!--             <input id="uploadFile" name="uploadFile[]" type="file" multiple> -->
        </div>
    </form>
    <hr>
    <h3>上传成功的图片显示在下面</h3>
    <div id="img_show"></div>
    
    <script type="text/javascript">
    	$(function(){
	   		 $('#uploadFile').fileinput({
	   			theme : 'explorer-fas',
   		        language: 'zh',
   		     	uploadAsync: true, //默认异步上传
	   		    showUpload: true,  //是否显示上传按钮
	   		 	showRemove :true, //显示移除按钮
   		     	showPreview: true, // 显示预览信息： true 显示 , false 不显示
   		        showCancel:true,   //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
	   	        showCaption: true, // 显示标题：true 显示 , false 不显示
   		        uploadUrl: '${ctx}/fileInputUploadServlet', // 上传文件的url
   		       	allowedFileExtensions: ['jpg', 'png', 'gif'], // 允许文件扩展名
   		    	browseClass: "btn btn-primary ", 
   		    	uploadExtraData: {kvId: '10'}, // 额外传输的参数
   		    	dropZoneEnabled: false,//是否显示拖拽区域
   		    	dropZoneTitle: '文件拖到这里即可上传！', // 拖拽区域提示内容 
	   		 });
	   		 
	   		 // fileuploaded 此事件仅针对ajax上传完成后出发， 可用于图片文件回显
	   		$('#uploadFile').on('fileuploaded', function(event, data, previewId, index) {
	   			var imgArray = data.response.result ;
	   			for(var x = 0 ; x < imgArray.length ; x++ ){
	   				$("#img").attr("src","${ctx}"+imgArray[x]);
	   				var _ele="<img src='${ctx}"+imgArray[x]+"' height='300' width='200' />";
	   				$("#img_show").append(_ele);
	   			}
	   		});
    		
    	});
    </script>
</body>
</html>